<%--
  Created by IntelliJ IDEA.
  User: cx
  Date: 2019/9/6
  Time: 13:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


<html>
<head>
    <title>上师信息表</title>
    <link href="${pageContext.request.contextPath}/layui/css/layui.css" type="text/css" rel="stylesheet" />
    <script src="${pageContext.request.contextPath}/js/ajaxfileupload.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
    <script src="${pageContext.request.contextPath}/layui/layui.all.js" charset="utf-8"></script>
    <style type="text/css">
        .layui-table-cell{
            height: auto;
            line-height: 28px;
        }
    </style>
    <script src="${pageContext.request.contextPath}/layui/layui.js" type="text/javascript"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
        layui.use('table', function(){
            var table = layui.table;
            table.render({
                elem: "#myTable",
                //提交数据的地址
                url: "${pageContext.request.contextPath}/guru/selectAllGuru",
                //开启分页,
                page: true,
                toolbar:"#myToolbar",
                cols: [[
                    {type:"checkbox"},
                    {title:"编号",field:"guruId"},
                    {title:"上师名字",field:"guruName"},
                    {title:"",field:"guruImage",width:127,templet:'<div><img src="{{d.guruImage}}"></div>'},
                    {title:"上师昵称",field:"guruNickName"},
                    {title:"状态",field:"guruStatus",templet:"#myGrender"},
                    {title:"操作",templet:"#CaoZuo"}
                ]]
            });
        });


        //修改操作
        function toOpenUpdateLayer(guruId) {
            //1.获取当前行数据===》发送ajax请求，获取当前行数据
            //var form=layui.form;
            $.ajax({
                url: "${pageContext.request.contextPath}/guru/selectByGuruId",
                data: "guruId=" + guruId,
                success: function (data) {
                    $("#guruId").val(data.guruId);
                    $("#imgdemo2").attr("src",data.guruImage);

                    $("#guname").val(data.guruName);

                    $("#nickname").val(data.guruNickName);

                }
            });
            //2.把数据填充到修改弹出层中==>弹出层显示
            $("#updateSubmitBtn").show();
            layui.use('layer', function () {
                layer.open({
                    title: "修改上师信息",
                    content: $("#updateFrom"),
                    type: 1,
                })
            });
        }
        //添加弹出层
        function toOpenAddLayer() {
            layui.use('layer', function () {
                $("#insertFrom")[0].reset();
                layer.open({
                    title: "添加图片",
                    content: $("#insertFrom"),
                    type: 1,
                })
            });

        }

        //删除一条数据
        function doDelete(guruId) {
            //确认；如果点击确认删除；否则不删除
            layui.use(['layer', 'table'], function () {
                var table = layui.table;
                layer.confirm('确定要删除嘛？', {icon: 3, title: '确认删除'}, function (index) {
                    $.ajax({
                        url: "${pageContext.request.contextPath}/guru/deleteGuru",
                        data: "guruId=" + guruId,

                        success: function (data) {
                            layer.alert(data.isDelete, {time: 2000});
                            table.reload("myTable");
                            layer.close(index);
                        }
                    })
                });
            });



        }

        function qwe(guruId,guruStatus) {
            //alert("狗仔");
            //确认；如果点击确认删除；否则不删除
            layui.use(['layer', 'table'], function () {
                var table = layui.table;
                layer.confirm('确定要冻结嘛？', {icon: 3, title: '确认冻结'}, function (index) {
                    $.ajax({
                        url: "${pageContext.request.contextPath}/guru/updateGuruStatus",
                        data: {"guruId":guruId,"guruStatus":guruStatus},

                        dataType:'json',
                        success: function (data) {
                            layer.alert(data.isUpdates, {time: 2000});
                            table.reload("myTable");

                            layer.close(index);
                        }
                    })
                });
            });
        }

        // 下载全部数据
        function doDownload() {
            //确认；如果点击确认删除；否则不删除
            layui.use(['layer','table'], function(){
                var table = layui.table;
                layer.confirm('确定要导出全部数据嘛？', {icon: 3, title:'确认导出'}, function(index){
                    $.ajax({
                        url:"${pageContext.request.contextPath}/guru/download",
                        success:function(data){
                            layer.alert(data.isxiazai,{time:2000});
                            table.reload("myTable");
                            layer.close(index);
                        }
                    })
                });
            });

        }

    </script>
    <script type="text/html" id="myGrender">
        {{#  if(d.guruStatus ==1){ }}
        冻结
        {{#  } else { }}
        展示
        {{#  } }}
    </script>
    <script id="CaoZuo" type="text/html">
        <button type="button" class="layui-btn layui-btn-radius layui-btn-normal" onclick="toOpenUpdateLayer('{{d.guruId}}')">修改</button>
        <button type="button" class="layui-btn layui-btn-danger layui-btn-radius" onclick="doDelete('{{d.guruId}}')">删除</button>

        {{#  if(d.guruStatus ==2){ }}
        <button type="button" class="layui-btn layui-btn-warm layui-btn-radius"  onclick="qwe('{{d.guruId}}','{{d.guruStatus}}')">冻结</button>
        {{#  } else { }}
        <button type="button" class="layui-btn layui-btn-radius "   onclick="qwe('{{d.guruId}}','{{d.guruStatus}}')">展示</button>
        {{#  } }}

    </script>

</head>
<body>
<%--<table id="myTable"></table>--%>
<table id="myTable" lay-data="{id: 'myTable'}"></table>
<div id="myToolbar" style="display: none;">
    <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" onclick="toOpenAddLayer()">
        <i class="layui-icon">&#xe608;</i> 添加上师
    </button>
    <button type="button" class="layui-btn layui-btn-normal layui-btn-radius" onclick="doDownload()">
        <i class="layui-icon">导出上师数据</i></button>
</div>
</div>
</div>

<%--修改上师信息--%>
<form id="updateFrom" style="display: none" class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">编号</label>
        <div class="layui-input-block">
            <input name="bannerId" id="guruId" class="layui-input" value="0" readonly/>
        </div>
    </div>


    <div>
        <label class="layui-form-label">选择要上传图片</label>
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="updateUpload" >上传图片</button>
            <div class="layui-upload-list">
                <img class="layui-upload-img" style="width: 100px;height: 100px" id="imgdemo2">
                <p id="demoTex"></p>
            </div>
        </div>
    </div>


    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上师名字</label>
        <div class="layui-input-block">
            <input name="guruName" id="guname" class="layui-input" placeholder="请输入上师名字" />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">上师昵称</label>
        <div class="layui-input-block">
            <input name="guruNickName" id="nickname" class="layui-input" placeholder="请输入上师昵称" />
        </div>
    </div>
    <div class="layui-form-item">
        <button lay-submit type="button" lay-filter="update" class="layui-btn" onclick="update()" id="updateSubmitBtn">修改上师信息</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>
<script>
    var file_upload_status = false;
    layui.use('upload', function() {
        var upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#updateUpload',
            url: '${pageContext.request.contextPath}/guru/updateGuru',
            multiple: true,
            number:1,
            data:{

                guruId: function () {
                    return $('#guruId').val()
                },
                guruName: function () {
                    return $('#guname').val()
                },
                guruNickName: function () {
                    return $('#nickname').val()
                },
            },
            //不让文件上传组件自动上传
            auto:false,
            //绑定提交按钮，来决定什么时候往后台发送数据
            bindAction:'#updateSubmitBtn',

            choose: function (obj) {
                //使用文件队列保存学则到的文件
                var files=this.files =obj.pushFile();
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    file_upload_status = true;
                    $('#imgdemo2').attr('src', result); //图片链接（base64）
                });
            },
            done: function(res) {
                // 获取上传的结果 获取后台的响应  如有响应的json可以获取
                // 如果上传失败
                console.info(index);
                file_upload_status = false;
                $('#imgdemo2').attr('src',"");
                delete this.files[index];


                layer.closeAll('page');
                var table=layui.table;
                table.reload("myTable");
                if (res.code > 0) {
                    return layer.msg('"修改失败"');
                } else {
                    // 上传成功 刷新table
                    return layer.msg('修改成功');
                }
            }
        });
    });
    //修改没有图片使用ajax
    function update() {
        if(!file_upload_status){
            //没有图片，可以执行ajax
            $.ajax({
                url:"${pageContext.request.contextPath}/guru/updateGuru1",
                data:{
                    guruId:$("#guruId").val(),
                    guruName:$("#guname").val(),
                    guruNickName:$("#nickname").val()
                },
                success:function (data) {
                    console.info(data)
                    layer.closeAll('page');
                    var table=layui.table;
                    table.reload("myTable");
                }
            })
        }
    }

</script>

<%--添加上师信息--%>
<form id="insertFrom" style="display: none" class="layui-form">
    <div class="layui-form-item">

        <div>
            <label class="layui-form-label">选择要上传图片</label>
            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test1" >上传图片</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" style="width: 100px;height: 100px" id="imgdemo1">
                    <p id="demoText"></p>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">上师名字</label>
        <div class="layui-input-block">
            <input name="guruName" id="gurunamen"  class="layui-input" placeholder="请输入上师名字" />
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">上师昵称</label>
        <div class="layui-input-block">
            <input name="guruNickName"  id="gurunicenamee" class="layui-input" placeholder="请输入上师昵称" />
        </div>
    </div>


    </div>
    <div class="layui-form-item">
        <button lay-submit type="button" lay-filter="insert" class="layui-btn" id="insertSubmitBtn">添加上师信息</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>

<script>


    // 公共变量 有没有选择图片
    var file_upload_status = false;
    layui.use('upload', function() {
        var upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1',
            url: '${pageContext.request.contextPath}/guru/insertGuru',
            multiple: true,
            number:1,
            data:{

                guruName: function () {
                    return $('#gurunamen').val()
                },
                guruNickName: function () {
                    return $('#gurunicenamee').val()
                },
            },
            //不让文件上传组件自动上传
            auto:false,
            //绑定提交按钮，来决定什么时候往后台发送数据
            bindAction:'#insertSubmitBtn',

            choose: function (obj) {

                var files = this.files = obj.pushFile();
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    file_upload_status = true;
                    $('#imgdemo1').attr('src', result); //图片链接（base64）
                });
            },
            done: function(res, index, upload) {
                console.info(index);
                file_upload_status = false;
                $('#imgdemo1').attr('src', "");
                delete this.files[index];

                // 获取上传的结果 获取后台的响应  如有响应的json可以获取
                // 如果上传失败
                layer.closeAll('page');
                var table=layui.table;
                table.reload("myTable");

                if (res.code > 0) {
                    return layer.msg('"添加失败"');
                } else {
                    // 上传成功 刷新table
                    return layer.msg('添加成功');
                }
            }
        });
    });

</script>

</body>
</html>
